<template>
	<view class="contain" :style="{ paddingTop: setmargintop() + 'px' }">
		<view class="new-top-nav">
			<uni-nav-bar title="文章详情" backgroundColor="#fff" color="#000" statusBar="true"
				@clickLeft="back()" left-icon="arrowleft"></uni-nav-bar>
		</view>
		<view class="new-header">
			<view class="line">
				<view class="one">索引号</view>
				<view class="one">{{ article.indexNumber }}</view>
				<view class="one">政策分类</view>
				<view class="one">{{ article.policyType && article.policyType.typeName }}</view>
			</view>
			<view class="line">
				<view class="one">发文机关</view>
				<view class="one">{{ article.department }}</view>
				<view class="one">成文日期</view>
				<view class="one">{{ article.writtenDateTime }}</view>
			</view>
			<view class="line">
				<view class="one">发文字号</view>
				<view class="one">{{ article.issueNumber }}</view>
				<view class="one">有效性</view>
				<view class="one">{{ article.validType && validList[article.validType] }}</view>
			</view>
		</view>
		<view class="contain-view" :style="{height:setcollapseheight() + 'px'}">
			<view class="title">
				{{ article.title }}
			</view>
			
			<view class="poster">
				<view class="post">发布单位：{{ article.department }}</view>
				<view class="post">发布日期：{{ article.createTime }}</view>
			</view>
			
			<view class="content">
				<view v-html="article.content"></view>
			</view>
			
			<view class="num">
				<uni-icons type="eye" :color="'#ffbb41'" size="25" class="eyeicon" />
				浏览量: {{ article.pageView }}
			</view>
			
			<!-- <view class="co">
				浏览量：{{ article.watchNum }}
			</view> -->
				
			<!-- 评论 @click="toReplay(item.user)" -->
			<view class="publish" v-for="(item,index) in communicationList" :key="index">
				<view class="publishuser">
					<view class="left">
						<view class="icon">
							<image src="@/static/index-message/jingliren.png" mode=""></image>
						</view>
						<view class="name">
							{{ item.senderName }}
						</view>
					</view>
					<view class="right">
						{{ item.timestamp }}
					</view>
				</view>
				<view class="publishcontent">
					<view class="method" v-html="item.commentContent">
					</view>
				</view>
			</view>
		</view>
			
		<!-- <view class="sign">
			<image @click="signFn(article.articleId)" v-if="!hasSigned" class="img" src="@/static/socialized-service/breed/sign.png" mode="aspectFit"></image>
			<image @click="signFn(article.articleId)" v-if="hasSigned" class="img" src="@/static/socialized-service/breed/signed.png" mode="aspectFit"></image>
			<view class="sign-co">{{ article.thumpupNum }}</view>
		</view> -->
		
		<!-- 发布评论 -->
		<view class="replay">
			<u-button class="btn" color="#0480FB" type="primary"  style="border-radius: 114rpx; height: 30px;"
				@click="toReplay()" size="medium" text="发布评论"></u-button>
		</view>
		
		<!-- 弹框 -->
		<u-popup :show="show" mode="center" width="700rpx" height="600px" @close="show=false">
			<view class="pop">
				<view class="pop-replay" v-if="replayUser">
					回复：{{ replayUser }}
				</view>
				<view class="pop-replay" v-else>
					发布评论
				</view>
				<view class="replaysContent">
					<u--textarea :confirmType="null" style="margin-bottom: 20rpx; height: 180rpx;" @change='dontMsg'
						v-model="replayInfo" placeholder="请输入内容" />
				</view>
				<!-- 回复按钮 -->
				<view class="replay">
					<u-button class="btn" color="#0480FB" type="primary" style="border-radius: 114rpx;height: 30px;"
						@click="addReplay"size="medium"  :text="replayUser ? '回复' : '评论'"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import techArticleApi from '@/api/socialized-servce/policies-regulation/index.js'
	import policiesApi from '@/api/socialized-servce/policies-regulation/index.js'
	import {
		yearTimetwo
	} from '@/plugins/gettime.js';
	export default {
		data() {
			return {
				article: {},
				hasSigned: false,
				signing: false,
				validList: {
					'INVALID': '失效',
					'NOT_INVALID': '尚未失效',
					'VALID': '有效',
					'MODIFIED': '已被修改',
					'PARTIAL_EFFECT': '部分生效',
				},
				communicationList: [],
				show: false,
				replayInfo: '',
				replayUser: '',
			}
		},
		onPullDownRefresh() {
			this.param = { page: 1, size: 5, total: 0 }
			this.loadDataList()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			this.loadArticle()
		},
		methods: {
			addReplay() {
				// this.$message.closeAll()
				if (!this.replayInfo) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					});
					return
				}
				policiesApi.commentPolicy({
					policyId: this.article.policyId,
					content: this.replayInfo,
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '发布成功',
							icon: 'none'
						});
						this.queryComment()
						this.replayInfo = ''
						this.show = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			queryComment() {
			  policiesApi.queryCommentPolicy(this.article.policyId).then(res => {
				this.communicationList = res.data
			  })
			},
			toReplay(user) {
				this.replayUser = user || ''
				this.show = true
			},
			loadArticle() {
				techArticleApi.queryByIdArticle({
					id: this.id
				}).then(res => {
					res.data.writtenDateTime = yearTimetwo(res.data.writtenDate)
					this.article = res.data
					this.queryComment()
					// this.hasSigned = res.data.userThumpUp == 1
				})
			},
			// 点赞
			signFn(id) {
				if (this.signing) return
				this.signing = true
				if (!this.hasSigned) {
					techArticleApi.thumpUp(id).then(res => {
						this.hasSigned = true
						uni.showToast({
							title: '点赞成功',
							icon: 'none'
						})
						// this.loadArticle()
						this.article.thumpupNum++
						this.signing = false
					})
				} else {
					techArticleApi.thumpUpCancel(id).then(res => {
						this.hasSigned = false
						uni.showToast({
							title: '取消点赞成功',
							icon: 'none'
						})
						this.article.thumpupNum--
						this.signing = false
					})
				}
			},
			// 设置顶部高度
			setmargintop() {
				let top = 0
				top = this.customBar + 10
				return top
			},
			//  设置内容高度
			setcollapseheight() {
				let topheightone = uni.upx2px(330)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
				  success: function(res) {
					winHeight = res.windowHeight
				  }
				});
				winHeight = parseInt(winHeight) - newheight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			//返回上一步
			back() {
				uni.navigateBack({ delta: 1 })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		font-size: 14px;
		line-height: 24px;

		.new-top-nav {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 99;
		}
		
		.new-header {
			width: 100%;
			min-height: 150rpx;
			margin: -20rpx 0 20rpx;
			
			.line {
				border-bottom: 1px solid #ddd;
				display: flex;
				
				.one {
					border-right: 1px solid #ddd;
					flex: 1;
					text-align: center;
					width: 20%;
					display: flex;
					justify-content: center;
					align-items: center;
					min-height: 70rpx;
					line-height: 36rpx;
					
					&:nth-child(2n) {
						flex: 2;
						width: 30%;
					}
					
					&:last-child {
						border-right: none;
					}
				}
			}
		}
		
		.contain-view {
			margin: 0 30rpx;
			padding: 20rpx 30rpx;
			position: relative;
			background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			overflow: auto;
			
			.title {
				font-size: 20px;
				font-weight: bold;
				// text-align: center;
				margin-bottom: 30rpx;
				color: #817539;
							
				&::before {
					display: inline-block;
					content: '';
					background-color: #817539;
					width: 5px;
					height: 32rpx;
					position: absolute;
					left: 0;
					top: 26rpx;
				}
			}
			
			.poster {
				color: #707273;
				margin-top: 20rpx;
				padding: 10rpx 0;
				border-bottom: 1px solid #d3e6f9;
				.post {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.co {
				color: #707273;
				margin-top: 10rpx;
			}
			.content {
				margin-top: 20rpx;
				// height: calc(100% - 290rpx);
				
				::v-deep img {
					display: block;
					max-width: 100%;
				}
				::v-deep .ql-video {
					display: block;
					max-width: 100%;
				}
			}
			.num {
				.eyeicon {
					vertical-align: middle;
					margin-right: 10rpx;
				}
			}
			.publish {
				padding: 30rpx 0;
				background: #FFFFFF;
				border-top: 1px solid #eee;

				.publishuser {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx;
					font-size: 28rpx;
					font-family: Arial-Regular, Arial;
					font-weight: 400;
					color: #606060;

					.left {
						display: flex;
						align-items: center;

						.icon {
							width: 26rpx;
							height: 28rpx;
							margin-right: 10rpx;
						
							image {
								width: 100%;
								height: 100%;
								vertical-align: top;
							}
						}
					}
				}

				.publishcontent {
					margin: 20rpx 0;
					padding: 0 80rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #606060;
				}
				
				.sub-publishuser {
					margin-left: 36rpx;
					border: 1px solid #eee;
					
					.publish {
						padding: 20rpx 0;
						
						&:first-child {
							border-top: none;
						}
						
						.publishuser {
							font-size: 24rpx;
						
							.name {
								vertical-align: middle;
									
								.to {
									display: inline-block;
									margin-right: 8rpx;
								}
								.replay {
									display: inline-block;
									color: blue;

								}
							}
						}
						
						.publishcontent {
							margin: 8rpx 0 0 0;
							font-size: 24rpx;
						}
					}
				}
			}
		}
		
		.sign {
			height: 100rpx;
			margin-top: 50rpx;
			text-align: center;
			.img {
				width: 100rpx;
				height: 100%;
			}
		}

		.pop {
			width: 600rpx;
			padding: 20rpx;
			
			.pop-replay {
				margin-bottom: 6rpx;
				
			}
		}
		&>.replay {
			margin: 26rpx 30rpx 0;
		}
	}
	
</style>
